<template>
	<view class="container">
		<view class="topbox">
			<view class="text" v-if="infoData">
				业主信息：房屋面积<text>{{infoData.housesize}}</text>㎡；物业单价：<text>{{infoData.property_fee}}</text>元平方米/月；类型：<text>{{infoData.floor_type_name}}</text>；物业服务时间：<text>{{infoData.property_time_str}}</text>
			</view>
		</view>
		<view class="paycard">
			<view class="card-text">
				请选择您要缴纳的物业周期
			</view>
			<view class="card-box">
				<view class="mini-card" @click="selectmonth(index)" :class="num === index?'active':''" v-if="listData && listData[0]" v-for="(item,index) in listData" :key="index">
					<view class="text4">
						{{item.property_month_num}}
					</view>
					个月
					<view class="tips" v-if="listData && listData[0] && item.presented_property_month_num_desc">
						{{item.presented_property_month_num_desc}}
					</view>
				</view>
				<view class="input-card">
					<input type="text" v-if="has_property_pay == 1" v-model="notedata" @blur="btnblur" @focus="btnfocus" value="" class="mini-cards"
					 placeholder-class="inputtext" :placeholder="placeholder" />
					 <view class="tips" v-if="customtips">
					 	{{presented_property_month_num_desc}}
					 </view>
				</view>
			</view>
			<view class="diybox" v-if="diy_content">
				<view class="diytext">赠送物品</view>
				<view class="diy_content">{{diy_content}}</view>
			</view>
			<view class="cell"></view>
			<view class="paynum">
				<view class="text1">
					缴费总额
				</view>
				<view class="num">
					￥{{total_price}}
				</view>
			</view>
		</view>
		<view class="text2">
			计算公式：物业总价=房屋面积*物业单价*购买月份
		</view>
		<view class="text3">注：单位(月）,自定义最大{{max_num}}个月</view>
		<button type="primary" :style="'background-color:' + btncolor" class="btn" @click="btnpay">去支付</button>
	</view>
</template>

<script>
	var common = require('../../../utils/common.js');
	var app = getApp();
	var _this;
	const getlifePaylist = () => {
		common.post('HouseApi&a=village_property_pay', {
			village_id: _this.village_id,
			pigcms_id: _this.pigcms_id,
		}, data => {
			console.log('++++', data)
			_this.infoData = data.now_user_info;
			_this.listData = data.property_list;
			_this.total_price = data.total_price;
			_this.has_property_pay = data.has_property_pay;
			_this.min_num = data.min_num;
			_this.max_num = data.max_num;
			_this.presented_property_month_num = data.property_list[0].presented_property_month_num;
			_this.property_month_num = data.property_list[0].property_month_num;
		},_this,error => {
			uni.showModal({
				title: common.changeTxt('提示'),
				content: error.data.errorMsg,
				showCancel: false,
				confirmText: common.changeTxt('确定'),
				success: function(res) {
					if (res.confirm) {
						common.navigateBack()
					}
				}
			});
		});
	};
	const getclickMonth = () => {
		common.post('HouseApi&a=add_presented_property_month', {
			village_id: _this.village_id,
			pigcms_id: _this.pigcms_id,
			id: _this.id,
		}, data => {
			if (data) {
				console.log("nnnnnnn",data)
				_this.total_price = data.total_price;
				_this.property_month_num = data.property_month_num;
				_this.presented_property_month_num = data.presented_property_month_num;
				_this.diy_content = data.diy_content
			}
		});
	};
	const getcustomMonth = () => {
		common.post('HouseApi&a=add_diy_presented_property_month', {
			village_id: _this.village_id,
			pigcms_id: _this.pigcms_id,
			diy_propertyt_month_num: _this.noteNum,
		}, data => {
			if (data) {
				console.log("ccccccccccccc",data)
				_this.total_price = data.total_price
				_this.id = data.property_id;
				_this.property_month_num = _this.noteNum;
				_this.presented_property_month_num = data.presented_property_month_num;
				_this.customtips = data.presented_property_month_num_desc;
				_this.presented_property_month_num_desc = data.presented_property_month_num_desc;
				_this.diy_content = data.diy_content;
			}
		});
	};
	const getbtnClick = () => {
		common.post('HouseApi&a=property_go_pay', {
			village_id: _this.village_id,
			pigcms_id: _this.pigcms_id,
			money: _this.total_price,
			house_village_property_id:_this.house_village_property_id,
			property_month_num: _this.property_month_num,
			presented_property_month_num: _this.presented_property_month_num,
		}, data => {
			console.log("nnnnnnn",data)
			common.parseUrl(data.order_url)
		});
	};
	export default {
		data() {
			return {
				infoData: {},
				listData: [],
				village_id: 0,
				fab_content: [],
				fab_pattern:{},
				pigcms_id: 0,
				total_price: 0,
				placeholder: '其他月份',
				notedata: '',
				noteNum:'',
				num: 0,
				has_property_pay: 1,
				id: '',
				house_village_property_id:'',
				property_month_num: '',
				presented_property_month_num: '',
				url:'',
				presented_property_month_num_desc:'',
				customtips:'',
				diy_content: '',
				btncolor: '',
				min_num:1,
				max_num:2,
			}
		},
		onShow() {
			// #ifdef H5
				common.hideWxShare()
			// #endif
		},
		onLoad(options) {
			_this = this;
			
			// #ifdef H5
			console.log('准备跳小程序页', _this);
			common.webToMiniapp(_this.route, options, 'redirect')
			// #endif
			
			common.setMainColor(_this, function(config) {
				_this.btncolor = config.config.mobile_head_color
				
				const res = uni.getStorageSync('village_key');
				if (res) {
					_this.village_id = res.village_id;
					_this.pigcms_id = res.pigcms_id;
					_this.village_name = res.village_name;
				};
				
				if(options.village_id && options.village_id != _this.village_id){
					common.post('HouseApi&a=search_village', {
						village_id: options.village_id
					}, data => {
						_this.village_logo = data.village_logo ? data.village_logo : data.wechat_share_img;
						_this.village_id = options.village_id;
						_this.village_name = options.village_name;
						var res = {
							village_id: _this.village_id,
							village_name: _this.village_name,
							village_logo: _this.village_logo
						};
						if(options.pigcms_id){
							res.pigcms_id = options.pigcms_id;
							_this.pigcms_id = options.pigcms_id;
						}
						uni.setStorageSync('village_key', res);
						
						getlifePaylist();
					});
					return false;
				}
				
				if (!app.globalData.is_login || !_this.pigcms_id || _this.pigcms_id == 0) {
					if (common.checkIsFooterPage("/pages/village_menu/my")) {
						wx.switchTab({
							url: "/pages/village_menu/my"
						});
					} else {
						wx.redirectTo({
							url: '/pages/village_menu/my',
						})
					}
					return false;
				}
				
				getlifePaylist();
			});
		},
		methods: {
			selectmonth(index) {
				_this.num = index;
				_this.id= _this.listData[index].id;
				getclickMonth();
				_this.notedata = "";
				_this.placeholder = "其他月份";
				_this.customtips = '';
				return false;
			},
			btnfocus() {
				_this.customtips = '';
				_this.placeholder = _this.min_num + '~' + _this.max_num + '个月';
				_this.notedata = "";
				_this.num = -1;
				_this.diy_content = '';
			},
			btnblur() {
				console.log('notedata', _this.notedata);
				//延时300毫秒，避免和其他点击事件产生冲突
				setTimeout(function(){
					if(_this.num == -1){
						if (_this.notedata) {
							_this.noteNum = parseInt(_this.notedata);
							console.log('_this.noteNum', _this.noteNum);
							console.log('_this.max_num', _this.max_num);
							console.log('_this.min_num', _this.min_num);
							if(_this.noteNum <= _this.max_num && _this.noteNum >= _this.min_num){
								getcustomMonth();
								_this.notedata = _this.noteNum + "个月";
							}else{
								uni.showModal({
									title: common.changeTxt('提示'),
									content: '仅支持' + _this.min_num + '~' + _this.max_num + '个月',
									showCancel: false,
									confirmText: common.changeTxt('确定'),
									success: function(res) {
										if (res.confirm) {
											_this.noteNum = _this.max_num;
											getcustomMonth();
											_this.notedata = _this.max_num + "个月";
										}
									}
								});
							}
						} else {
							_this.notedata = "";
							_this.placeholder = "其他月份";
							_this.num = 0;
							_this.id= _this.listData[0].id;
							getclickMonth();
						}
					}else{
						_this.notedata = "";
						_this.placeholder = "其他月份";
					}
				},300);
				
			},
			btnpay() {
				getbtnClick();
			},
		},
	}
</script>

<style>
	page {
		background: rgb(245, 245, 245);
	}

	.container {
		margin: 0;
		padding: 0;
	}

	.topbox {
		width: 100%;
		height: 289rpx;
		background-color: #2681f3;
	}

	.text {
		font-size: 24rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 40rpx;
		letter-spacing: 0rpx;
		padding: 30rpx 30rpx;
		color: #ffffff;
	}

	.paycard {
		margin: 0 20rpx;
		background-color: #ffffff;
		border-radius: 10px;
		margin-top: -150rpx;
		overflow: hidden;
	}

	.card-text {
		font-size: 26rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 70rpx;
		letter-spacing: 0rpx;
		color: #666666;
		margin: 20rpx 20rpx 0rpx 20rpx;
	}

	.card-box {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
	}

	.mini-card {
		width: 208rpx;
		height: 106rpx;
		background-color: rgba(233,242,254,1);
		border: 4rpx solid rgba(233,242,254,1);
		border-radius: 10rpx;
		margin-left: 19rpx;
		margin-top: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #2681f3;
		font-size: 32rpx;
		position: relative;
	}
	.input-card {
		margin-left: 19rpx;
		margin-top: 20rpx;
		position: relative;
		overflow: hidden;
		border-radius: 10rpx;
		border: 4rpx solid rgba(201, 201, 201, 0);
	}
	.mini-cards {
		width: 212rpx;
		height: 110rpx;
		background-color: rgba(201, 201, 201, 0.2);
		text-align: center;
	}

	.active {
		position: relative;
		width: 208rpx;
		height: 106rpx;
		background-color: rgba(255, 255, 255, 0.2);
		border: 4rpx solid rgb(38, 129, 243);
		border-radius: 10rpx;
		margin-left: 19rpx;
		margin-top: 20rpx;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #2681f3;
		font-size: 32rpx;
	}
	
	.inputtext {
		text-align: center;
	}

	.text4 {
		padding-top: 5rpx;
		line-height: 35rpx;
		font-size: 34rpx;
		font-weight: 600;
	}
	.tips {
		position: absolute;
		top: -4rpx;
		right: -3rpx;
		background: url(../../../static/images/tips-1.png);
		background-repeat: no-repeat;
		background-size: cover;
		font-size: 20rpx;
		width: 100rpx;
		border-radius: 0rpx 10rpx 0rpx 0rpx;
		height: 36rpx;
		overflow: hidden;
		text-align: right;
		line-height: 36rpx;
		color: #FFFFFF;
	}
	.paynum {
		margin: 0rpx 20rpx 20rpx 20rpx;
		overflow: hidden;
		display: flex;
		line-height: 70rpx;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.text1 {
		font-size: 28rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 50rpx;
		letter-spacing: 0rpx;
		color: #666666;
	}

	.num {
		font-size: 32rpx;
		font-weight: 600;
		font-stretch: normal;
		line-height: 70rpx;
		letter-spacing: 0rpx;
		color: #ff6666;
	}

	.text2 {
		font-size: 24rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 40rpx;
		letter-spacing: 0rpx;
		color: #999999;
		margin: 30rpx 40rpx 0rpx 40rpx;
	}
	.text3 {
		font-size: 24rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 40rpx;
		letter-spacing: 0rpx;
		color: #999999;
		margin: 0rpx 40rpx 30rpx 40rpx;
	}
	.diybox {
		margin: 20rpx 20rpx 0rpx 20rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.diytext {
		font-size: 28rpx;
		color: #999999;
		font-weight: normal;
		font-stretch: normal;
		line-height: 50rpx;
		letter-spacing: 0rpx;
	}
	.diy_content {
		font-size: 28rpx;
		color: #999999;
		font-weight: normal;
		font-stretch: normal;
		line-height: 50rpx;
		letter-spacing: 0rpx;
	}
	.cell {
		height: 2rpx;
		background: rgb(245, 245, 245);
		margin: 20rpx 20rpx 0rpx 20rpx;
	}
	.btn {
		font-size: 32rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 90rpx;
		letter-spacing: 0px;
		color: #ffffff;
		background-color: #2681f3;
		border-radius: 44rpx;
		margin: 0rpx 100rpx;
		margin-top: 100rpx;
		border: 0rpx;
	}
</style>
